import React, { Component } from 'react'
import './App.css'
import Header from './component/Header'
import List from './component/List'
import Footer from './component/Footer'
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state={
      todos: [
        { id: '001', name: '吃饭', done: true },
        { id: '002', name: '睡觉', done: true },
        { id: '003', name: '打豆豆', done: false },
      ] 
    }
    this.addTodo = this.addTodo.bind(this);
    this.updateTodo = this.updateTodo.bind(this);
    this.deleteTodo = this.deleteTodo.bind(this);
  }

  // addTodo用于添加一个todo,接受的参数是todo对象
  addTodo(todoObj) {
    const { todos } = this.state;
    const newTodo = [ todoObj, ...todos ];
    this.setState({ todos: newTodo })
  }

  // List组件勾选change事件
  updateTodo(id, checked) {
    const { todos } = this.state;
    const newTodos = todos.map( todoObj => {
      if(todoObj.id === id) return { ...todoObj, done: checked }
      else return todoObj;
    })
    this.setState({todos: newTodos})
  }

  // 删除todo
  deleteTodo(id) {
    const { todos } = this.state;
    const newTodos = todos.filter((todo) => {
      return todo.id !== id
    })
    this.setState({todos: newTodos})
  }

  // 勾选/取消勾选全部
  checkAllTodo = (done) => {
    console.log('done===>', done)
    const { todos } = this.state
    const newTodo = todos.map((todoObj) => {
      return {...todoObj, done}
    })
    this.setState({todos: newTodo})
  }

  // 清除所有已完成的
  clearAllDone = () => {
    const { todos } = this.state;
    // 过滤数据
    const newTodos = todos.filter((todoObj) => {
      // 返回有所done未完成的数据
      return !todoObj.done;
    })
    this.setState({todos: newTodos})
  }

  render() {
		const {todos} = this.state
    return (
      <div className="App">
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
          <Footer todos={todos} clearAllDone={this.clearAllDone} checkAllTodo={this.checkAllTodo} />
        </div>
      </div>
      </div>
    )
  }
}